<template>
  <div>
    <button
      class="btn"
      @click="btnClick"
      :style="{'background': showBg ? 'rgba(0, 0, 0, 1)' : '#fff', 'color': showBg ? '#fff' : 'rgba(0,4,0,1)'  }"
    >{{name}}</button>
  </div>
</template>
<script>
export default {
  props: {
    name: {
      type: String,
      default: ''
    },
    showBg: {
      type: Boolean,
      default: true
    }
  },
  data () {
    return {}
  },
  methods: {
    btnClick () {
      this.$emit('btnClick')
    }
  }
}
</script>
<style lang="scss" scoped>
.btn {
  display: inline-block;
  border: none;
  outline: none;
  width: 100%;
  height: 0.8rem;
  font-size: 0.28rem;
  font-family: PingFang SC;
  font-weight: 400;
  line-height: 0.8rem;
  text-align: center;
  border: 1px solid rgba(4, 0, 0, 1);
}
</style>
